.l_header {
    position:fixed;
    z-index: 9999;
    top:0;
    left:0;
    width:100%;
    font-size: @fontsize_base;
    line-height: @height_navbar;
    height: @height_navbar;
    overflow: hidden;
    font-family: @fontfamily_base;
    font-weight: bold;
    .wrapper{
        padding: auto @gap;
        .enable-trans();
    }
    .wrapper.sub{
        .enable-trans();
        transform: translateY(-@height_navbar);
        .logo{
            // padding-left: 0;
            @media(max-width: @on_phone){
                .enable-trans();
                padding-left: @gap;
                padding-right: 0;
                font-size: @fontsize_base;
            }
        }
    }
    .nav--main,.nav-sub{
        height: @height_navbar;
    }
    background: @theme_bg_navbar;
    &, a{
        .txt-ellipsis;
        height: @height_navbar;
        color: @theme_text_in_header;
    }
    // &:extend(.z-depth-nav); // 适合深色导航栏背景
    box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
    .enable-trans();
    &:hover {
        // &:extend(.z-depth-nav-raised);
    }
    &:active {

    }

    .logo {
        font-size: @fontsize_logo;
        font-family: @fontfamily_logo;
        @media(max-width: @on_phone){
            flex: auto;
        }
    }
    .menu{
        position:relative;
        flex: 1 0 auto;
        height: @height_navbar;
        .enable-trans();
        margin:0 15px;
        ul > li > a{
            font-weight: normal;
            font-size: 18px;
            color: #666;
            padding: 0 15px;
            &:hover,&.active{
                .enable-trans();
                color: @theme_text_in_header;
/*                border-bottom: 2px solid @color_ax_light_red;*/
            }
        }
        @media(max-width: @on_phone){
            display:none;
        }
    }
    .switcher{
        display: none;
        align-items: center;
        font-size: @fontsize_base;
        line-height: @height_navbar;

        & > li{
            height: @height_navbar - @gap;
            .enable-trans();
            margin: 2px;
            @height: @height_navbar - @gap;
            @media(max-width: @on_phone){
                width: @height;
                height: @height;
            }
            a{
                display: flex;
                justify-content: center;
                align-items: center;
                width: @height;
                height: @height;
                border-radius: 100px;
                .enable-trans();
                &:active {
                    background: darken(@theme_bg_navbar, 10%);
                    // color: @theme_bg_quote;
                }
                @media(max-width: @on_phone){
                    width: @height;
                    height: @height;
                }
            }
        }
        @media(max-width: @on_phone){
            display: flex;
            padding-left: @gap/2;
            padding-right: 5px;
        }
    }
    .nav-sub .switcher{
        display: flex;
    }

    @media (max-width: @on_phone)  {
        .m_search{
            width:0;
            overflow: hidden;
            position: absolute;
            .enable-trans();
            margin: 0 @gap/2;
        }
        &.z_search-open{
            .logo{
                opacity:0;
            }
            .m_search{
                width: 100% - 1.5*@gap;
            }
        }
    }
}

.m_search {
    position: relative;
    height: 40px;
    width: @width_sidebar;
    line-height: 40px;
    margin-top: @gap/2;
    margin-bottom: @gap/2;
    vertical-align: middle;
    .form {
        position: relative;
        display: block;
        width: 100%;
    }
    .icon,.input{
        .enable-trans(.1s);
    }
    .icon {
        position: absolute;
        display:block;
        height: @height_navbar - @gap;
        width: 40px;
        line-height: 40px;
        top: 0;
        left: @gap/2;
        font-size: 16px;
    }
    .input {
        display:block;
        font-size: 16px;
        line-height: 40px;
        margin: 0;
        width: 120px;
        color: #000;
        padding-left: @fontsize_base + @gap - 2px;
        @media(max-width: @on_phone){
            padding-left: @fontsize_base + @gap - 2px;
        }
        height: 40px;
        line-height: 40px;
        font-family: @fontfamily_base;
        font-weight: normal;
        border: none;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        -webkit-appearance: none;
        box-shadow: none;
        border: 1px solid #ddd;
        .enable-trans();
        ~ .icon{
            color: #888;
        }
        .set-placeholder({color: #888});
        &:hover{
            border: 1px dashed fade(@theme_text_in_header, 60%);
        }
        &:active{
            width: 100%;
            padding-left: @fontsize_base + @gap - 2px;
            @media(max-width: @on_phone){width: 80%;}
        }
        &:focus {
            // color:@black;
            border: 1px solid fade(@theme_text_in_header, 60%);
            // .set-placeholder({color: @black});
            width: 100%;
            @media(max-width: @on_phone){width: 80%;}
        }
        &:hover ~ .icon{
            color: #0099FF;
        }
    }
}

.menu-phone{
    .header{
        border-top-left-radius: @border_radius;
        border-top-right-radius: @border_radius;
        background-color: fade(@theme_bg_navbar,90%);
        color: @theme_text_in_header;
        font-size: @fontsize_base;
        line-height: 1.8em;
        padding: 8px @gap+6px;
    }
    position: fixed;
    right: 0;
    z-index:9999 + 1;
    line-height: 2 * @gap;
    background: white;
    border-right: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transform: translate3d(~"calc(100% + 2*@{gap})", -0, 0);
    .enable-trans();

    nav {
        padding: @gap/2 0px;
        .nav {
            height: @height_cell;
            line-height: 32px;
            position: relative;
            display: block;
            color: @black;
            // font-size: 0.8125em;
            padding: 2px 20px;
            &:hover{
            background: rgba(0, 0, 0, 0.1);
            }
        }
    }
    @media(min-width: @on_desktop){
        display: none;
    }
}